<!--
@Description:属性管理
@Author:zqy
@Date:2024-05-07 11:00:49
@Last Modified by:zqy
@Last Modified time:2024-05-07 11:00:49
-->
<template>
  <div>
    <!-- 顶部搜索 -->
    <div class="search hy_topclas">
      <search-form
        :search-config="searchConfig"
        :label-width="90"
        @search="handleSearch"
        @visible-change="resetTableHeight"
      />
    </div>
    <div class="Attr-head">
      <el-row type="flex" class="row-bg" flex-direction="row-reverse">
        <el-button type="primary" size="mini" @click="btnOperate('add')">新增</el-button>
        <el-button type="primary" size="mini" @click="btnOperate('edit')">编辑</el-button>
        <el-button type="primary" size="mini" @click="btnOperate('del')">删除</el-button>
        <el-button type="primary" size="mini" @click="btnOperate('config')">属性值维护</el-button>
      </el-row>
    </div>
    <table-box
      ref="refTable"
      :table-config="tableConfig"
      :other-filters="otherFilters"
      :selected-arry.sync="tableSelected"
      :table-sortable="false"
      :off-set="-20"
    />
    <edit-form
      v-if="showEdit"
      :visible.sync="showEdit"
      :detail-data="detailData"
      @refreshTable="refreshTable"
    />
    <ValueConfig
      v-if="showValueConfig"
      :visible.sync="showValueConfig"
      :main-data="detailData"
      @refreshMain="refreshTable(true)"
    />
  </div>
</template>
<script>
import EditForm from './EditForm'
import ValueConfig from './ValueConfig'
import { deleteAttr, updateAttrSort } from '@/api/shopauxPlat/attrConfig' // 新增编辑-保存,删除
export default {
  name: 'AttrConfig',
  components: { EditForm, ValueConfig },
  props: {},
  data() {
    const that = this
    return {
      searchConfig: [
        { label: '属性编码', prop: 'attCode', type: 'text' },
        { label: '属性名称', prop: 'attName', type: 'text' }
      ],
      tableConfig: {
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/atlasAttribute/page`,
        hideFuncBar: true,
        tabIndex: 20,
        sort: 'sort',
        order: 'asc',
        setting: [
          {
            prop: 'attCode',
            label: '属性编码',
            minWidth: 150
          },
          {
            prop: 'attName',
            label: '属性名称',
            minWidth: 200
          },
          {
            prop: 'sort',
            label: '排序',
            minWidth: 200,
            sortable: false,
            type: 'hidden',
            overflowHidden: false,
            render: (_h, row) => {
              const btns = []
              if (this.hasPermission('top')) {
                btns.push(<el-button type='text' size='mini' onClick={that.handleSort.bind(this, row, 'setTop')}>置顶</el-button>)
              }
              if (this.hasPermission('up')) {
                btns.push(<el-button type='text' size='mini' onClick={that.handleSort.bind(this, row, 'setUp')}>上移</el-button>)
              }
              if (this.hasPermission('down')) {
                btns.push(<el-button type='text' size='mini' onClick={that.handleSort.bind(this, row, 'setDown')}>下移</el-button>)
              }
              if (this.hasPermission('bottom')) {
                btns.push(<el-button type='text' size='mini' onClick={that.handleSort.bind(this, row, 'setBottom')}>置底</el-button>)
              }
              return _h('div', btns)
            }
          }
        ]
      },
      formData: {
        list: [] // table列表初始化
      },
      jumpPage: 1, // 分页前往默认值
      pagesize: 10, // 每页的条数
      pageSizes: [10, 20, 30, 50, 100],
      currentPage: 1, // 默认开始页面
      addEditFlag: false, // 增行/编辑后的标识，true时只显示保存和取消
      total: 0,
      allTotal: 0,
      showEdit: false,
      showValueConfig: false,
      otherFilters: [],
      detailData: '',
      tableData: [],
      tableSelected: []
    }
  },
  computed: {},
  created() {

  },
  methods: {
    // 获取搜索条件
    handleSearch(data) {
      this.otherFilters = data.filtersRaw || []
      this.refreshTable()
    },
    btnOperate(code) {
      switch (code) {
        case 'add':
          this.handleEdit()
          break
        case 'edit':
          if (!this.singleJudge(this.tableSelected, '编辑', true)) {
            return
          }
          this.handleEdit(this.tableSelected[0])
          break
        case 'del':
          if (!this.singleJudge(this.tableSelected, '删除', true)) {
            return
          }
          this.handleDelete(this.tableSelected[0])
          break
        case 'config':
          if (!this.singleJudge(this.tableSelected, '属性值维护', true)) {
            return
          }
          this.handleConfig(this.tableSelected[0])
          break
      }
    },

    hasPermission(code) {
      return true
      // return this.buttons.filter(v => v.buttonCode === code).length > 0
    },
    // 新增/编辑
    handleEdit(row) {
      this.detailData = (row && row.id) ? row : ''
      this.$nextTick(() => {
        this.showEdit = true
      })
    },
    // 删除
    handleDelete(row) {
      const { id, attName } = row
      this.$confirm(`确认删除属性名【${attName}】吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteAttr(id).then(res => {
          if (res.success === 1) {
            this.$message.success('删除成功')
            this.refreshTable()
          }
        })
      })
    },
    /**
   * 排序
   * @param {Object} row 排序行
   * @param {string} type 移动类型(setTop 置顶，setUp 上移，setDown 下移， setBottom 置底)
  */
    handleSort(row, type) {
      if (this.sorting) return
      const now = Date.now()
      if (this.sortTime) {
        const diffTime = Math.floor((now - this.sortTime) / 1000)
        // 对比排序操作时间差，大于2s的可操作
        if (diffTime < 2) return
      }
      this.sortTime = now
      const params = {
        id: row.id,
        type
      }
      this.sorting = true
      updateAttrSort(params).then(res => {
        this.sorting = false
        if (res.success === 1) {
          this.refreshTable()
        }
      }).catch(() => {
        this.sorting = false
      })
    },
    // 属性值维护
    handleConfig(row) {
      this.detailData = row
      this.$nextTick(() => {
        this.showValueConfig = true
      })
    },
    // 刷新表格数据
    refreshTable(isInit) {
      this.$nextTick(() => {
        this.$refs.refTable.initTableData(isInit ? '' : 'onPage')
      })
    },
    resetTableHeight() {
      this.$refs.refTable.refreshTableHeight()
    }
  }
}
</script>
<style lang='scss' scoped>
.pagination-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin: 8px 0 !important;
    .el-pagination{
      padding: 2px 0;
    }
    .pagination-info {
      padding: 2px 0 !important;
      font-size: 12px !important;
      .total {
        color: #3DC094;
      }
    }
    .el-pagination__jump {
      display: inline-block;
      position: relative;
      top: -4px;
      line-height: 28px;
      margin: 0 20px;
      /deep/ .is-without-controls {
        margin: 0 4px;
        width: 50px !important;
        /deep/ input {
          height: 28px;
        }
      }
    }
}
 .Attr-head{
   margin: 20px 0 10px 0;
 }
  .basicpic{
   width: 100px;
   height: 100px;
   margin: 5px;
 }
 .search hy_topclas{
   margin: 10px;
 }
 .search hy_topclas{
   margin: 10px;
 }
</style>
